<template>
  <div class="api-example">
    <h2>API请求示例</h2>
    <el-card class="example-card">
      <template #header>
        <div class="card-header">
          <span>用户操作</span>
        </div>
      </template>
      <el-form :model="userForm" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="userForm.username" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="userForm.password" type="password" placeholder="请输入密码" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleLogin">登录</el-button>
          <el-button @click="handleRegister">注册</el-button>
          <el-button @click="handleGetUserInfo">获取用户信息</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="example-card" style="margin-top: 20px;">
      <template #header>
        <div class="card-header">
          <span>数据操作</span>
        </div>
      </template>
      <el-button @click="handleGetDataList" :loading="loading">获取数据列表</el-button>
      <el-button @click="handleCreateData">创建数据</el-button>
      
      <div v-if="result" class="result">
        <h3>响应结果:</h3>
        <pre>{{ result }}</pre>
      </div>
    </el-card>
  </div>
</template>

<script>
import { userApi, dataApi } from '../utils/api'

export default {
  name: 'ApiExample',
  data() {
    return {
      loading: false,
      result: null,
      userForm: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    async handleLogin() {
      try {
        const response = await userApi.login({
          username: this.userForm.username,
          password: this.userForm.password
        })
        this.result = response
        // 保存token到localStorage
        if (response.data && response.data.token) {
          localStorage.setItem('ACCESS_TOKEN', response.data.token)
        }
      } catch (error) {
        console.error('登录失败:', error)
        this.result = '登录失败: ' + error.message
      }
    },
    
    async handleRegister() {
      try {
        const response = await userApi.register({
          username: this.userForm.username,
          password: this.userForm.password
        })
        this.result = response
      } catch (error) {
        console.error('注册失败:', error)
        this.result = '注册失败: ' + error.message
      }
    },
    
    async handleGetUserInfo() {
      try {
        const response = await userApi.getUserInfo()
        this.result = response
      } catch (error) {
        console.error('获取用户信息失败:', error)
        this.result = '获取用户信息失败: ' + error.message
      }
    },
    
    async handleGetDataList() {
      this.loading = true
      try {
        const response = await dataApi.getDataList({ page: 1, size: 10 })
        this.result = response
      } catch (error) {
        console.error('获取数据列表失败:', error)
        this.result = '获取数据列表失败: ' + error.message
      } finally {
        this.loading = false
      }
    },
    
    async handleCreateData() {
      try {
        const response = await dataApi.createData({
          name: '测试数据',
          description: '这是一个测试数据'
        })
        this.result = response
      } catch (error) {
        console.error('创建数据失败:', error)
        this.result = '创建数据失败: ' + error.message
      }
    }
  }
}
</script>

<style scoped>
.api-example {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.example-card {
  border-radius: 8px;
}

.card-header {
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.result {
  margin-top: 20px;
  padding: 15px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  margin: 0;
}
</style>